<template>
  <div id="app">
    <p>1、使用props通信</p>
    <modal btn-ok-val="ok" title="提示" detail="props 传值" @ok-click="okClick"></modal>
    <h1 :style="{color: isColorRed ? 'red' : ''}">组件之间的通信</h1>

    <p>2、使用 v-model 通信</p>
    <modal btn-ok-val="修改" :title="title" v-model="title" detail="双向数据绑定（v-model）"></modal>

    <p>3、使用 .sync 修饰符通信</p>
    <modal btn-ok-val="修改" title=".sync 修饰符" :detail.sync="detail"></modal>

    <p>4、使用 事件总线（event bus）通信</p>
    <modal btn-ok-val="修改" title="事件总线" @ok-click="updateFontColor">
      <template v-slot:detail>
        <ul :style="{color: updateColor ? 'pink' : ''}">
          <li>new Vue的实例上会有两个方法，$on $emit</li>
          <li>利用$on 来监听事件，$emit发布事件</li>
          <li>利用这样的方式，只要能访问到公用的实例，都可以随意的监听发布任意事件。</li>
          <li>1. 作为插件，创建新的实例</li>
          <li>2. 使用$root访问根实例</li>
        </ul>
      </template>
    </modal>
  </div>
</template>

<script>
import Modal from './components/modal'

export default {
  name: 'app',
  data () {
    return {
      isColorRed: false,
      title: 'title 将被修改',
      detail: '详情将被修改',
      updateColor: false
    }
  },
  components: {
    Modal
  },
  methods: {
    okClick () {
      this.isColorRed = true
    },
    updateFontColor () {
      console.log('li 颜色已经被修改')
      this.updateColor = true
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
ul li {
  text-align: left
}
</style>
